CSS Grid ட்ராக் அளவு பேரம் பேசுதலில் தேர்ச்சி பெறுதல்: லேஅவுட் கட்டுப்பாட்டுத் தீர்வு குறித்த ஒரு ஆழமான பார்வை

CSS Grid லேஅவுட் வலை வடிவமைப்பை நாம் அணுகும் விதத்தில் ஒரு புரட்சியை ஏற்படுத்தியுள்ளது, இது இரு பரிமாண லேஅவுட்களின் மீது இணையற்ற கட்டுப்பாட்டை வழங்குகிறது. அதன் சக்தி மறுக்க முடியாததாக இருந்தாலும், Grid-ஐ உண்மையாக தேர்ச்சி பெறுவது என்பது ட்ராக் அளவுகள் எவ்வாறு தீர்மானிக்கப்படுகின்றன மற்றும் கட்டுப்பாடுகள் எவ்வாறு தீர்க்கப்படுகின்றன என்பதைப் பற்றிய ஆழமான புரிதலைப் பொறுத்தது. இங்குதான் ட்ராக் அளவு பேச்சுவார்த்தையின் சிக்கலான நடனம் devreக்கு வருகிறது.

சர்வதேச டெவலப்பர்கள் மற்றும் வடிவமைப்பாளர்களுக்கு, பல்வேறு சாதனங்கள், திரை அளவுகள் மற்றும் உள்ளடக்க அளவுகளில் சீராக செயல்படும் வலுவான, மாற்றியமைக்கக்கூடிய இடைமுகங்களை உருவாக்க இந்த முக்கிய வழிமுறைகளைப் புரிந்துகொள்வது மிக முக்கியம். இந்த விரிவான வழிகாட்டி CSS Grid ட்ராக் அளவுகளைப் பேச்சுவார்த்தை நடத்தப் பயன்படுத்தும் அல்காரிதம்களை விளக்கும், உங்கள் லேஅவுட்கள் பார்வைக்கு ஈர்ப்பாக இருப்பது மட்டுமல்லாமல், செயல்பாட்டு ரீதியாகவும் புத்திசாலித்தனமாக இருப்பதை உறுதி செய்யும்.

அடிப்படைகளைப் புரிந்துகொள்ளுதல்: Grid ட்ராக்குகள் மற்றும் அவற்றின் அளவுகள்

பேச்சுவார்த்தையில் மூழ்குவதற்கு முன், அடிப்படைகளை நிறுவுவோம். CSS Grid-ல், நாம் ஒரு கிரிட் கண்டெய்னரை வரையறுத்து, அதற்குள் பொருட்களை வைக்கிறோம். கிரிட் ஆனது ட்ராக்குகளால் ஆனது – கிரிட் கோடுகளுக்கு இடையேயான இடைவெளிகள். இந்த ட்ராக்குகள் நெடுவரிசைகளாகவோ அல்லது வரிசைகளாகவோ இருக்கலாம். grid-template-columns மற்றும் grid-template-rows போன்ற பண்புகளைப் பயன்படுத்தி இந்த ட்ராக்குகளின் அளவை நாம் வெளிப்படையாக வரையறுக்கிறோம்.

ட்ராக் அளவுகளை வரையறுக்கப் பயன்படுத்தப்படும் பொதுவான அலகுகள் பின்வருமாறு:

• முழுமையான அலகுகள்: px, cm, pt, போன்றவை. இவை ஒரு நிலையான அளவை வரையறுக்கின்றன.
• சார்பு அலகுகள்: %, em, rem, vw, vh. இந்த அளவுகள் மற்ற உறுப்புகள் அல்லது வியூபோர்ட்டுடன் தொடர்புடையவை.
• fr அலகு: கிரிட் கண்டெய்னரில் கிடைக்கும் இடத்தின் ஒரு பகுதியைக் குறிக்கும் ஒரு நெகிழ்வான அலகு. இது Grid-ன் நெகிழ்வுத்தன்மையின் ஒரு மூலக்கல்லாகும்.
• முக்கிய வார்த்தைகள்: auto, min-content, max-content. இவை பேச்சுவார்த்தைக்கு மிகவும் முக்கியமானவை.

பேச்சுவார்த்தையின் மையம்: கட்டுப்பாட்டுத் தீர்வு அல்காரிதம்கள்

குறிப்பிடப்பட்ட ட்ராக் அளவுகள் முழுமையானதாக இல்லாதபோது, அல்லது விரும்பிய அளவுகளுக்கும் கிடைக்கும் இடத்திற்கும் இடையில் ஒரு முரண்பாடு ஏற்படும்போது இந்த அதிசயம் நிகழ்கிறது. CSS Grid இந்த கட்டுப்பாடுகளைத் தீர்க்க அதிநவீன அல்காரிதம்களைப் பயன்படுத்துகிறது, இது லேஅவுட் செயல்பாட்டுடன் இருப்பதை உறுதி செய்கிறது. பேச்சுவார்த்தை செயல்முறையை பரவலாக பல நிலைகளாக வகைப்படுத்தலாம்:

1. உள்ளார்ந்த அளவு: உள்ளடக்கத்தின் செல்வாக்கு

கிரிட் கண்டெய்னரின் பரிமாணங்களைக் கருத்தில் கொள்வதற்கு முன், Grid கிரிட் பொருட்களுக்குள் உள்ள உள்ளடக்கத்தின் உள்ளார்ந்த அளவைப் பார்க்கிறது. இங்குதான் auto, min-content, மற்றும் max-content ஆகியவை devreக்கு வருகின்றன.

• min-content: இந்த முக்கிய வார்த்தை ஒரு உறுப்பின் உள்ளார்ந்த குறைந்தபட்ச அளவைக் குறிக்கிறது. உரைக்கு, அது அதன் கண்டெய்னரை மீறாமல் இருக்கக்கூடிய மிகச்சிறிய அளவு (எ.கா., அகலமான வார்த்தையின் அகலம்). மற்ற உறுப்புகளுக்கு, இது அவற்றின் குறைந்தபட்ச உள்ளடக்க அளவை அடிப்படையாகக் கொண்டது.
• max-content: இந்த முக்கிய வார்த்தை ஒரு உறுப்பின் உள்ளார்ந்த அதிகபட்ச அளவைக் குறிக்கிறது. உரைக்கு, அது எந்தவித முறிவும் இல்லாமல் ஒரே வரியில் இருக்கும்போது அதன் அகலம். மற்ற உறுப்புகளுக்கு, இது அவற்றின் அதிகபட்ச உள்ளடக்க அளவை அடிப்படையாகக் கொண்டது.
• auto: இந்த முக்கிய வார்த்தை சூழலைப் பொறுத்தது. Grid-ல், auto பொதுவாக அதன் கிரிட் பொருட்களுக்குள் உள்ள உள்ளடக்கத்தின் அடிப்படையில் ட்ராக் தன்னைத்தானே அளவிடும், ஆனால் அது கிடைக்கும் இடம் மற்றும் பிற ட்ராக் அளவுகளால் கட்டுப்படுத்தப்படுகிறது. இது பெரும்பாலும் min-content மற்றும் max-content க்கு இடையில் ஒரு மதிப்பாக இயல்புநிலையாக இருக்கும்.

நடைமுறை உதாரணம்: மாறுபட்ட அளவு உரைகளைக் கொண்ட ஒரு கார்டு கூறுகளைக் கற்பனை செய்து பாருங்கள். இந்த கார்டுகளைக் கொண்ட ஒரு நெடுவரிசைக்கு grid-template-columns: auto; ஐப் பயன்படுத்தினால், நெடுவரிசை அகலமான கார்டின் உள்ளடக்கத்திற்கு (அதன் max-content அகலம்) பொருந்தும் அளவுக்கு விரிவடையும், வெளிப்படையான பிக்சல் மதிப்புகள் தேவையில்லை. மாறாக, உள்ளடக்கம் மிகவும் குறைவாக இருந்தால், அது அதன் min-content அளவிற்கு சுருங்கக்கூடும்.

2. வெளிப்படையான அளவு மற்றும் குறைந்தபட்சங்கள்

உள்ளார்ந்த அளவுகள் கருத்தில் கொள்ளப்பட்டவுடன், Grid வெளிப்படையான ட்ராக் அளவுகளையும் வரையறுக்கப்பட்ட குறைந்தபட்சங்களையும் மதிப்பிடுகிறது. ஒவ்வொரு ட்ராக்கிற்கும் ஒரு குறைந்தபட்ச அளவு உள்ளது, அதற்குக் கீழே அது ஒருபோதும் சுருங்காது. இயல்பாக, இந்த குறைந்தபட்சம் அதன் உள்ளடக்கங்களின் min-content அளவால் தீர்மானிக்கப்படுகிறது.

இருப்பினும், நீங்கள் இதைப் பயன்படுத்தி இந்த இயல்புநிலை குறைந்தபட்சத்தை மீறலாம்:

• min() செயல்பாடு: min(size1, size2, ...). ட்ராக் குறிப்பிடப்பட்ட அளவுகளில் மிகச் சிறியதாக இருக்கும்.
• max() செயல்பாடு: max(size1, size2, ...). ட்ராக் குறிப்பிடப்பட்ட அளவுகளில் மிகப் பெரியதாக இருக்கும்.
• clamp() செயல்பாடு: clamp(MIN, VAL, MAX). ட்ராக் VAL ஆக இருக்கும், ஆனால் அது MIN மற்றும் MAX ஆல் கட்டுப்படுத்தப்படும்.

minmax(min, max) செயல்பாடு இங்கு குறிப்பாக சக்தி வாய்ந்தது. இது ஒரு ட்ராக்கிற்கான அளவு வரம்பை வரையறுக்கிறது. ட்ராக் குறைந்தபட்சம் min ஆகவும், அதிகபட்சம் max ஆகவும் இருக்கும். நெகிழ்வான மற்றும் வலுவான லேஅவுட்களை உருவாக்குவதற்கு இது அடிப்படையானது.

நடைமுறை உதாரணம்: குறைந்தபட்சம் 200px அகலம் இருக்க வேண்டிய ஒரு சைடுபாரைக் கருத்தில் கொள்ளுங்கள், ஆனால் 300px வரை வளரலாம், பின்னர் கிடைக்கும் இடத்தைப் பொறுத்து சரிசெய்யலாம். நீங்கள் அதை grid-template-columns: minmax(200px, 1fr); என வரையறுக்கலாம். போதுமான இடம் இருந்தால், அது ஒரு பகுதியை (1fr) எடுத்துக் கொள்ளும். இடம் குறைவாக இருந்தால், அது 200px ஆக சுருங்கும், ஆனால் அதற்கு மேல் இல்லை. 1fr 300px ஐ விட பெரிய மதிப்பிற்குத் தீர்க்கப்பட்டால், மற்றொரு வெளிப்படையான அதிகபட்சம் அமைக்கப்பட்டிருந்தால் அது 300px ஆகக் கட்டுப்படுத்தப்படும், அல்லது மேலும் கட்டுப்பாடுகள் இல்லை என்றால் தொடர்ந்து வளரும்.

3. fr அலகின் சக்தி மற்றும் கிடைக்கும் இடப் பகிர்வு

fr அலகு Grid-ன் நெகிழ்வான அளவு மற்றும் இடப் பகிர்வுக்கான பதில் ஆகும். உங்களிடம் fr அலகுகளுடன் வரையறுக்கப்பட்ட ட்ராக்குகள் இருக்கும்போது, Grid அனைத்து நிலையான அளவு ட்ராக்குகள் மற்றும் உள்ளார்ந்த உள்ளடக்க அளவுகளைக் கணக்கில் கொண்ட பிறகு கிரிட் கண்டெய்னரில் மீதமுள்ள இடத்தைக் கணக்கிடுகிறது. இந்த மீதமுள்ள இடம் பின்னர் fr-வரையறுக்கப்பட்ட ட்ராக்குகளுக்கு அவற்றின் விகிதாச்சாரப்படி விநியோகிக்கப்படுகிறது.

கணக்கீடு:

1. அனைத்து நிலையான அளவு ட்ராக்குகளின் (px, %, em, min-content, max-content, ইত্যাদি) மொத்த அளவைக் கணக்கிடுங்கள்.
2. இந்த மொத்தத்தை கிரிட் கண்டெய்னரின் கிடைக்கும் இடத்திலிருந்து கழிக்கவும். இது உங்களுக்கு 'இலவச இடத்தை' தருகிறது.
3. அனைத்து fr மதிப்புகளையும் கூட்டவும்.
4. 'இலவச இடத்தை' fr மதிப்புகளின் கூட்டுத்தொகையால் வகுக்கவும். இது 1 fr-ன் மதிப்பைத் தருகிறது.
5. இந்த 1 fr மதிப்பை ஒவ்வொரு ட்ராக்கிற்கும் ஒதுக்கப்பட்ட fr மதிப்பால் பெருக்கி அதன் இறுதி அளவைப் பெறவும்.

முக்கிய குறிப்பு: fr அலகு auto அல்லது உள்ளடக்க அடிப்படையிலான முக்கிய வார்த்தைகளுடன் வெளிப்படையாக அளவிடப்படாத ட்ராக்குகளுக்கு மட்டுமே விநியோகிக்கப்படுகிறது, அவை ஏற்கனவே ஒரு உறுதியான அளவிற்குத் தீர்க்கப்பட்டுள்ளன. ஒரு ட்ராக் auto என அமைக்கப்பட்டிருந்தால் மற்றும் அதன் உள்ளடக்கத்திற்கு fr விநியோகம் அனுமதிப்பதை விட அதிக இடம் தேவைப்பட்டால், auto ட்ராக் முன்னுரிமை பெறலாம், இது fr அலகுகளுக்கு கிடைக்கும் இடத்தை சுருக்கக்கூடும்.

நடைமுறை உதாரணம்: மூன்று நெடுவரிசைகளைக் கொண்ட ஒரு லேஅவுட்டைக் கற்பனை செய்து பாருங்கள்: grid-template-columns: 200px 1fr 2fr;. கிரிட் கண்டெய்னர் 1000px அகலமாக இருந்தால்:

• முதல் நெடுவரிசை 200px எடுக்கும்.
• மீதமுள்ள இடம்: 1000px - 200px = 800px.
• fr அலகுகளின் கூட்டுத்தொகை 1 + 2 = 3.
• 1 fr = 800px / 3 = 266.67px.
• இரண்டாவது நெடுவரிசை (1fr) 266.67px ஆக மாறும்.
• மூன்றாவது நெடுவரிசை (2fr) 2 * 266.67px = 533.34px ஆக மாறும்.

4. முரண்பாடுகளைக் கையாளுதல்: அளவுகள் கிடைக்கும் இடத்தை மீறும் போது

விரும்பிய ட்ராக் அளவுகளின் கூட்டுத்தொகை கிரிட் கண்டெய்னரில் கிடைக்கும் இடத்தை மீறும் போது என்ன நடக்கும்? இது ஒரு பொதுவான சூழ்நிலை, குறிப்பாக ரெஸ்பான்சிவ் வடிவமைப்புடன்.

Grid ஒரு தீர்வு அல்காரிதத்தைப் பயன்படுத்துகிறது, அது முன்னுரிமை அளிக்கிறது:

1. குறைந்தபட்ச ட்ராக் அளவுகள்: ட்ராக்குகள் அவற்றின் வரையறுக்கப்பட்ட குறைந்தபட்சங்களுக்குக் கீழே சுருங்காது (இது, இயல்பாக, வேறுவிதமாகக் குறிப்பிடப்படாவிட்டால் min-content ஆகும்).
2. fr அலகுகளின் நெகிழ்வுத்தன்மை: fr அலகுகளுடன் வரையறுக்கப்பட்ட ட்ராக்குகள் கிடைக்கும் இடத்தில் ஏற்படும் மாற்றங்களை உறிஞ்ச வடிவமைக்கப்பட்டுள்ளன. மற்ற கட்டுப்பாடுகளுக்கு இடமளிக்க அவை சுருங்கலாம்.
3. auto ட்ராக்குகள்: auto ட்ராக்குகள் அவற்றின் உள்ளடக்கத்திற்கு பொருந்த முயற்சிக்கும், ஆனால் சுருங்கவும் முடியும்.

சுருக்கமாக, Grid அனைத்து கட்டுப்பாடுகளையும் பூர்த்தி செய்ய முயற்சிக்கும், ஆனால் அது முடியாவிட்டால், அது ட்ராக்குகளை அவற்றின் குறைந்தபட்ச சாத்தியமான அளவில் வைத்திருப்பதற்கு முன்னுரிமை அளிக்கும் மற்றும் நெகிழ்வான அலகுகளை (fr போன்றவை) நெருக்குவதற்கு அனுமதிக்கும். குறைந்தபட்சங்களைக் கூட பூர்த்தி செய்ய முடியாவிட்டால், உள்ளடக்கம் வழிந்து செல்லக்கூடும்.

minmax() செயல்பாடு இங்கு ஒரு முக்கிய பங்கு வகிக்கிறது. minmax() இல் ஒரு குறைந்தபட்ச மதிப்பை அமைப்பதன் மூலம், இடம் மிகவும் குறைவாக இருந்தாலும், ஒரு ட்ராக் அந்தப் புள்ளிக்கு அப்பால் சுருங்காது என்பதை நீங்கள் உறுதி செய்கிறீர்கள். உங்களிடம் பல ட்ராக்குகள் minmax() ஐப் பயன்படுத்தி, அவற்றின் குறைந்தபட்சங்கள் கூட்டாக கிடைக்கும் இடத்தை மீறினால், Grid அந்த வழிவை அவற்றுக்கிடையே விநியோகிக்க முயற்சிக்கும், ஆனால் குறைந்தபட்சங்கள் முடிந்தவரை மதிக்கப்படும்.

நடைமுறை உதாரணம்: பல விட்ஜெட்களுடன் கூடிய ஒரு டாஷ்போர்டு லேஅவுட்டைக் கருத்தில் கொள்ளுங்கள். ஒவ்வொரு விட்ஜெட் நெடுவரிசையும் குறைந்தபட்சம் 150px அகலமாகவும், ஆனால் நெகிழ்வாகவும் இருக்க வேண்டும் என்று நீங்கள் விரும்புகிறீர்கள். நீங்கள் grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); ஐப் பயன்படுத்தலாம். கண்டெய்னர் 500px அகலமாக இருந்தால், Grid இரண்டு நெடுவரிசைகளைப் பொருத்தக்கூடும் (2 * 150px = 300px, 1fr களுக்குப் பகிர்ந்து கொள்ள 200px விட்டு). கண்டெய்னர் 250px ஆக சுருங்கினால், ஒரே ஒரு நெடுவரிசை மட்டுமே பொருந்தும், முழு 250px ஐயும் எடுத்துக் கொள்ளும் (ஏனெனில் 1fr 150px ஐ விட பெரியதாக இருக்கும்).

5. fit-content()-ன் பங்கு

ட்ராக் அளவிற்கு ஒரு புதிய மற்றும் மிகவும் பயனுள்ள செயல்பாடு fit-content(limit) ஆகும். இந்த செயல்பாடு max-content போல செயல்படுகிறது, ஆனால் அது ஒரு குறிப்பிட்ட வரம்பால் கட்டுப்படுத்தப்படுகிறது. இது திறம்பட சொல்கிறது: 'உங்கள் உள்ளடக்கம் விரும்பும் அளவுக்கு அகலமாக இருங்கள், ஆனால் இந்த வரம்பை மீறாதீர்கள்.' இது உள்ளடக்க அடிப்படையிலான அளவை ஒரு அதிகபட்ச கட்டுப்பாட்டுடன் சமநிலைப்படுத்த ஒரு சக்திவாய்ந்த வழியாகும்.

கணக்கீடு: fit-content(limit) என்பது max(min-content, min(max-content, limit)) ஆக தீர்க்கப்படுகிறது.

நடைமுறை உதாரணம்: ஒரு தயாரிப்பு பெயருக்கான அட்டவணை நெடுவரிசையைக் கற்பனை செய்து பாருங்கள். அது மிக நீளமான தயாரிப்பு பெயருக்கு போதுமான அகலமாக இருக்க வேண்டும், ஆனால் அட்டவணையின் ஒட்டுமொத்த லேஅவுட்டை உடைக்கும் அளவுக்கு அகலமாக இருக்கக்கூடாது என்று நீங்கள் விரும்புகிறீர்கள். நீங்கள் grid-template-columns: fit-content(200px); ஐப் பயன்படுத்தலாம். நெடுவரிசை மிக நீளமான தயாரிப்பு பெயருக்கு பொருந்தும் வகையில் விரிவடையும், ஆனால் அந்த பெயர் 200px ஐ விட நீளமாக இருந்தால், நெடுவரிசை 200px ஆகக் கட்டுப்படுத்தப்படும், மற்றும் உரை மடிக்கப்பட வாய்ப்புள்ளது.

மேம்பட்ட கருத்துக்கள் மற்றும் உலகளாவிய பரிசீலனைகள்

சர்வதேசமயமாக்கல் மற்றும் மாறுபட்ட உள்ளடக்கத்தைக் கருத்தில் கொள்ளும்போது பேச்சுவார்த்தை செயல்முறை இன்னும் நுணுக்கமாகிறது.

A. சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n)

வெவ்வேறு மொழிகளில் வெவ்வேறு உரை நீளங்கள் உள்ளன. ஜெர்மன் மொழியில் ஒரு தயாரிப்பு விளக்கம் ஆங்கிலத்தை விட கணிசமாக நீளமாக இருக்கலாம். பயனர்பெயர்கள் அல்லது தலைப்புகள் வெவ்வேறு கலாச்சாரங்கள் மற்றும் மொழிகளில் வியத்தகு முறையில் நீளத்தில் மாறுபடலாம்.

• உள்ளடக்க அடிப்படையிலான அளவு (auto, min-content, max-content, fit-content()) இங்கு உங்கள் சிறந்த நண்பன். இந்த மதிப்புகளை நம்பியிருப்பதன் மூலம், Grid உண்மையான உரை நீளத்திற்கு இடமளிக்க ட்ராக் அளவுகளை மாறும் வகையில் சரிசெய்ய முடியும், மோசமான குறுக்கீடு அல்லது அதிகப்படியான வெற்று இடத்திற்கு வழிவகுக்கும் நிலையான அலகுகளால் கடுமையாக கட்டுப்படுத்தப்படுவதை விட.
• fr அலகுகளை புத்திசாலித்தனமாகப் பயன்படுத்துங்கள். அவை மீதமுள்ள இடம் விகிதாசாரமாக விநியோகிக்கப்படுவதை உறுதி செய்கின்றன, இது மொழி-தூண்டப்பட்ட உள்ளடக்க விரிவாக்கத்தைக் கணக்கில் கொள்ளாத நிலையான சதவீதங்களை விட பொதுவாக மிகவும் வலுவானது.
• பல்வேறு மொழிகளுடன் சோதிப்பது மிக முக்கியம். உங்கள் Grid லேஅவுட்கள் இணக்கமாக இருப்பதை உறுதிசெய்ய, உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தி உங்கள் உலாவியின் மொழியை தற்காலிகமாக மாற்றவும் அல்லது மொழிபெயர்க்கப்பட்ட உள்ளடக்கத்துடன் உறுப்புகளை ஆய்வு செய்யவும்.

உலகளாவிய உதாரணம்: ஒரு செய்தி இணையதளத்தின் தலைப்பைக் கருத்தில் கொள்ளுங்கள், அங்கு தளத்தின் பெயர் அல்லது ஒரு டேக்லைன் காட்டப்படும். ஆங்கிலத்தில், அது சுருக்கமாக இருக்கலாம். ஜப்பானிய மொழியில், அது சில எழுத்துக்களால் குறிப்பிடப்படலாம் ஆனால் வேறுபட்ட காட்சி அகலத்தைக் கொண்டிருக்கலாம். நீண்ட கூட்டுச் சொற்களைக் கொண்ட ஒரு மொழியில், அது மிகவும் விரிவானதாக இருக்கலாம். லோகோ இடதுபுறத்திலும், வழிசெலுத்தல் வலதுபுறத்திலும் இருக்கும் ஒரு லேஅவுட்டிற்கு grid-template-columns: max-content 1fr; ஐப் பயன்படுத்துவது, லோகோ பகுதிக்குத் தேவையான இடத்தை இயற்கையாக எடுத்துக் கொள்ள அனுமதிக்கிறது, வழிசெலுத்தல் மீதமுள்ள இடத்தை நெகிழ்வாக நிரப்ப உதவுகிறது, லோகோவின் காட்சி அகலத்திற்கு ஏற்றவாறு மாற்றியமைக்கிறது.

B. பயனர் இடைமுக அளவிடுதல் மற்றும் அணுகல்தன்மை

உலகெங்கிலும் உள்ள பயனர்கள் அணுகல்தன்மைக்காக உரை அளவுகள் மற்றும் ஜூம் நிலைகளை சரிசெய்கிறார்கள். உங்கள் Grid லேஅவுட்கள் இந்த மாற்றங்களுக்கு அழகாக பதிலளிக்க வேண்டும்.

• சார்பு அலகுகளை விரும்புங்கள் (em, rem, vw, vh) பொருத்தமான இடங்களில் ட்ராக் அளவுகளுக்கு, ஏனெனில் அவை பயனர் விருப்பங்களுடன் அளவிடப்படுகின்றன.
• நெகிழ்வான அலகுகளுடன் minmax() (எ.கா., minmax(10rem, 1fr)) குறைந்தபட்சம் படிக்கக்கூடிய அளவைப் பராமரிக்கும் அதே வேளையில் கிடைக்கும் இடத்தைப் பயன்படுத்தும் மாற்றியமைக்கக்கூடிய கூறுகளை உருவாக்குவதற்கு சிறந்தது.
• உரை அளவு அதிகரிக்கும்போது உள்ளடக்கம் இயற்கையாக மீண்டும் பாய்வதைத் தடுக்கும் அதிகப்படியான கட்டுப்பாடான நிலையான அளவுகளைத் தவிர்க்கவும்.

உலகளாவிய உதாரணம்: ஒரு இ-காமர்ஸ் பயன்பாட்டில் ஒரு தயாரிப்பு பட்டியல் பக்கம். பட நெடுவரிசை ஒரு நிலையான விகிதத்தைக் கொண்டிருக்க வேண்டும், ஆனால் உரை விளக்க நெடுவரிசை மாறுபட்ட நீளமுள்ள தயாரிப்பு பெயர்கள் மற்றும் விளக்கங்களுக்கு ஏற்ப மாற்றியமைக்க வேண்டும். grid-template-columns: 150px 1fr; ஆங்கிலத்திற்கு வேலை செய்யக்கூடும், ஆனால் மற்றொரு மொழியில் தயாரிப்பு பெயர்கள் மிகவும் நீளமாக இருந்தால் மற்றும் கண்டெய்னர் அகலம் நிலையானதாக இருந்தால், அவை வழிந்து செல்லக்கூடும். ஒரு சிறந்த அணுகுமுறை ஒட்டுமொத்த தயாரிப்பு கிரிட்டிற்கு grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); ஆக இருக்கலாம், மற்றும் ஒவ்வொரு தயாரிப்புப் பொருளுக்குள்ளும், grid-template-areas அல்லது grid-template-columns உரை புலங்களுக்கு min-content மற்றும் max-content ஐப் பயன்படுத்தலாம்.

C. செயல்திறன் பரிசீலனைகள்

Grid மிகவும் செயல்திறன் மிக்கதாக இருந்தாலும், பல உள்ளடக்க அடிப்படையிலான உள்ளார்ந்த அளவு கணக்கீடுகளை உள்ளடக்கிய சிக்கலான கணக்கீடுகள் சில நேரங்களில் ரெண்டரிங் செயல்திறனை பாதிக்கலாம், குறிப்பாக குறைந்த சக்தி வாய்ந்த சாதனங்களில் அல்லது மிகப் பெரிய தரவுத்தொகுப்புகளுடன்.

• ஆழமாகப் பதிக்கப்பட்ட Grid பொருட்கள் மற்றும் மிகவும் சிக்கலான உள்ளார்ந்த அளவு கணக்கீடுகள் குறித்து கவனமாக இருங்கள்.
• உண்மையில் ஒரு நிலையான அளவு தேவைப்படும் மற்றும் உள்ளடக்க ஓட்டத்தைச் சார்ந்திராத கூறுகளுக்கு px அல்லது % ஐப் பயன்படுத்துங்கள்.
• எந்தவொரு செயல்திறன் சிக்கல்களையும் கண்டறிய உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தி உங்கள் லேஅவுட்களை சுயவிவரப்படுத்துங்கள்.

திறமையான Grid பேச்சுவார்த்தைக்கான நடைமுறை உத்திகள்

CSS Grid ட்ராக் அளவு பேச்சுவார்த்தையின் முழு சக்தியையும் பயன்படுத்த, இந்த உத்திகளைப் பின்பற்றுங்கள்:

1. உள்ளார்ந்த அளவுகளுடன் தொடங்குங்கள்

உங்கள் உள்ளடக்கம் *எவ்வாறு* அளவிடப்பட விரும்புகிறது என்பதை எப்போதும் கருத்தில் கொள்ளுங்கள். min-content, max-content, மற்றும் auto ஐ உங்கள் ஆரம்ப கட்டுமானத் தொகுதிகளாகப் பயன்படுத்துங்கள். இது உங்கள் லேஅவுட் அதன் உள்ளடக்கத்திற்கு இயல்பாகவே பதிலளிப்பதை உறுதி செய்கிறது.

2. நெகிழ்வுத்தன்மை மற்றும் கட்டுப்பாடுகளுக்கு minmax() ஐப் பயன்படுத்துங்கள்

இது வலுவான லேஅவுட்களுக்கான மிக முக்கியமான கருவி என்று வாதிடலாம். உள்ளடக்க சரிவைத் தடுக்க குறைந்தபட்சங்களை வரையறுக்கவும் மற்றும் இடப் பகிர்வை அனுமதிக்க அதிகபட்சங்களை (அல்லது fr போன்ற நெகிழ்வான அலகுகளை) வரையறுக்கவும்.

grid-template-columns: minmax(200px, 1fr) minmax(150px, 2fr) 300px;

இந்த உதாரணம் மூன்று நெடுவரிசைகளை அமைக்கிறது. முதலாவது குறைந்தபட்சம் 200px ஆக இருக்கும் மற்றும் கிடைக்கும் நெகிழ்வான இடத்தில் 1/3 ஐ எடுத்துக் கொள்ளும். இரண்டாவது குறைந்தபட்சம் 150px ஆக இருக்கும் மற்றும் கிடைக்கும் நெகிழ்வான இடத்தில் 2/3 ஐ எடுத்துக் கொள்ளும். மூன்றாவது ஒரு நிலையான 300px ஆகும்.

3. repeat() ஐ auto-fit அல்லது auto-fill உடன் பயன்படுத்தவும்

பொருட்களின் ரெஸ்பான்சிவ் பட்டியல்களுக்கு (கார்டுகள் அல்லது தயாரிப்பு பட்டியல்கள் போன்றவை), repeat(auto-fit, minmax(min-size, 1fr)) ஒரு கேம்-சேஞ்சர் ஆகும். இது கண்டெய்னர் அகலத்தின் அடிப்படையில் நெடுவரிசைகளின் எண்ணிக்கையை தானாகவே சரிசெய்கிறது, ஒவ்வொரு பொருளுக்கும் குறைந்தபட்சம் min-size மற்றும் நெகிழ்வான இடம் இருப்பதை உறுதி செய்கிறது.

.card-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

இது ஒவ்வொரு கார்டும் குறைந்தபட்சம் 280px அகலமாக இருக்கும் ஒரு கிரிட்டை உருவாக்குகிறது. கண்டெய்னர் 3 கார்டுகளுக்கு போதுமான அகலமாக இருந்தால், அது 3 ஐக் காண்பிக்கும்; 2 க்கு மட்டுமே போதுமானால், அது 2 ஐக் காண்பிக்கும், மற்றும் பல. 1fr அவை வரிசையை நிரப்ப விரிவடைவதை உறுதி செய்கிறது.

4. செயல்பாடுகளின் வரிசையைப் புரிந்து கொள்ளுங்கள்

பொதுவான ஓட்டத்தை நினைவு கூருங்கள்: உள்ளார்ந்த அளவு -> வெளிப்படையான அளவுகள்/குறைந்தபட்சங்கள் -> நெகிழ்வான அலகு விநியோகம் -> முரண்பாடு தீர்வு (குறைந்தபட்சங்களுக்கு முன்னுரிமை அளித்தல்).

5. விரிவாகச் சோதிக்கவும்

உங்கள் லேஅவுட்களை பரந்த அளவிலான உள்ளடக்க நீளங்கள், திரை அளவுகள் மற்றும் வெவ்வேறு உலாவி சூழல்களுடன் சோதிக்கவும். வெவ்வேறு சாதனங்கள் மற்றும் நெட்வொர்க் நிலைமைகளை உருவகப்படுத்த உங்கள் உலாவியின் டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்.

6. உங்கள் Grid தர்க்கத்தை ஆவணப்படுத்துங்கள்

சிக்கலான லேஅவுட்களுக்கு, குறிப்பாக சர்வதேச அணிகளில், சில ட்ராக் அளவுகள் ஏன் தேர்ந்தெடுக்கப்பட்டன மற்றும் அவை எவ்வாறு செயல்படும் என்று எதிர்பார்க்கப்படுகிறது என்பதை ஆவணப்படுத்துவது எதிர்கால பராமரிப்பு மற்றும் மேம்பாட்டிற்கு விலைமதிப்பற்றதாக இருக்கும்.

முடிவுரை

CSS Grid ட்ராக் அளவு பேச்சுவார்த்தை என்பது மிகவும் டைனமிக் மற்றும் ரெஸ்பான்சிவ் லேஅவுட்களை அனுமதிக்கும் ஒரு சக்திவாய்ந்த அமைப்பு. உள்ளார்ந்த உள்ளடக்க அளவுகள், வெளிப்படையான ட்ராக் வரையறைகள், நெகிழ்வான fr அலகு, மற்றும் கட்டுப்பாட்டுத் தீர்வு அல்காரிதம்களுக்கு இடையிலான தொடர்பைப் புரிந்துகொள்வதன் மூலம், எந்தவொரு உள்ளடக்கம் மற்றும் எந்தவொரு சூழலுக்கும் புத்திசாலித்தனமாக மாற்றியமைக்கும் அதிநவீன இடைமுகங்களை நீங்கள் உருவாக்கலாம்.

ஒரு உலகளாவிய பார்வையாளர்களுக்கு, இந்த பேச்சுவார்த்தைக் கொள்கைகளை ஏற்றுக்கொள்வது என்பது பார்வைக்கு சீரானதாக இருப்பது மட்டுமல்லாமல், செயல்பாட்டு ரீதியாகவும் வலுவான வலைத்தளங்கள் மற்றும் பயன்பாடுகளை உருவாக்குவதாகும், இது உலகெங்கிலும் உள்ள பயனர்களின் மொழி, பிராந்தியம் அல்லது அணுகல்தன்மை தேவைகளைப் பொருட்படுத்தாமல் அவர்களின் பல்வேறு தேவைகளுக்கு இடமளிக்கிறது. இந்த கருத்துக்களில் தேர்ச்சி பெறுங்கள், மேலும் உங்கள் ஃபிரன்ட்-எண்ட் மேம்பாட்டுத் திறன்களை புதிய உயரத்திற்கு உயர்த்தி, உண்மையிலேயே நெகிழ்ச்சியான மற்றும் பயனர் மையப்படுத்தப்பட்ட வடிவமைப்புகளை உருவாக்குவீர்கள்.